<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <el-button
                type="primary"
                icon="el-icon-position"
                @click="handleChoose"
                >选择业主</el-button
            >
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
                >添加业主</el-button
            >
            <owner-card />
            <el-table :data="tableList" border stripe highlight-current-row>
                <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="成员ID"
                    prop="a"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="名称"
                    prop="b"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="性别"
                    prop="c"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="年龄"
                    prop="d"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="类型"
                    prop="d"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="身份证"
                    prop="e"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="联系方式"
                    prop="f"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="创建员工"
                    prop="g"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="备注"
                    prop="g"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="微信"
                    prop="h"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="QQ"
                    prop="i"
                    align="center"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template>
                        <el-button type="text" @click="handleEdit()"
                            >编辑</el-button
                        >
                        <el-button type="text" @click="handleDel()"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                title="添加业主"
                :visible.sync="saveOwnerDialogVisible"
                width="50%"
                @close="handleCloseSave"
            >
                <save-owner />
            </el-dialog>
            <el-dialog
                title="选择业主"
                :visible.sync="chooseOwnerDialogVisible"
                width="50%"
                @close="handleCloseChoose"
            >
                <choose-owner />
            </el-dialog>
        </basic-container>
    </div>
</template>

<script>
import SaveOwner from "../components/saveOwner";
import ChooseOwner from "../components/chooseOwner";
import OwnerCard from '../components/ownerCard.vue';
export default {
    name: "ownerMember",
    components: {
        SaveOwner,
        ChooseOwner,
        OwnerCard,
    },
    data() {
        return {
            saveOwnerDialogVisible: false,
            chooseOwnerDialogVisible: false,
            queryForm: {},
            tableList: [
                {
                    id: 1,
                    a: "a",
                    b: "b",
                    c: "c",
                    d: "d",
                    e: "e",
                    f: "f",
                    g: "g",
                    h: "h",
                    i: "i",
                },
            ],
        };
    },
    methods: {
        handleSearch() {},
        handleClear() {},
        handleAdd() {
            this.saveOwnerDialogVisible = true;
        },
        handleChoose() {
            this.chooseOwnerDialogVisible = true;
        },
        handleCloseSave() {},
        handleCloseChoose() {},
        handleEdit() {
            this.saveOwnerDialogVisible = true;
        },
        handleDel() {
            this.$confirm("确定删除该业主成员吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-right: 50px;
}
.el-table {
    margin-top: 10px;
}
</style>